import { DeleteOutlined, PlusOutlined, StarOutlined, UnorderedListOutlined } from "@ant-design/icons"
import { Button, Flex, Input, Tabs } from "antd"
import { ReactNode, useEffect, useState } from "react"
import { GetProps, useDispatch } from "react-redux"
import { Outlet, useNavigate, } from "react-router"
import { manageServer } from "../server/manageServer"
import { useRequest } from "ahooks"
import { getInfoManage } from "../store/manage"

type SearchProps = GetProps<typeof Input.Search>;

const { Search } = Input;

type tabsType = {
    icon: ReactNode,
    name: string,
    path: string
}
const tabs: tabsType[] = [
    {
        icon: <UnorderedListOutlined />, name: '我的问卷', path: '/manage/list'
    },
    {
        icon: <StarOutlined />, name: '星标问卷', path: '/manage/star'
    },
    {
        icon: <DeleteOutlined />, name: '回收站', path: '/manage/trash'
    },
]
function ManageLayout() {
    const push = useNavigate()
    const dispatch = useDispatch()
    const [currentIndex, setIndex] = useState('我的问卷')
    const onChange = (key: string) => {
        const index = Number(key) - 1
        push(tabs[index].path);
        setIndex(tabs[index].name)
    };

    useEffect(() => {
        run()
    }, [])
    const { run } = useRequest(manageServer, {
        manual: true,
        onSuccess(result) {
            const { data } = result

            dispatch(getInfoManage(data)) // 存储到 redux store
        },
        onFinally() {

        },
    })
    const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);

    return (
        <Flex align={"flex-start"} className="pt-6">
            <div className="flex-1"></div>
            <div className="w-12%">
                <Button className="mb-10" type="primary" icon={<PlusOutlined />} size="large" onClick={() => {
                    const _id = Date.now()
                    console.log(_id);
                    push(`/question/edit/${_id}`)
                }}>
                    新建问卷
                </Button>
                <Tabs
                    tabPosition="left"
                    onChange={(e: string) => {
                        onChange(e)

                    }}
                    type="card"
                    items={tabs.map((item, i) => {
                        const id = String(i + 1);
                        return {
                            label: item.name,
                            key: id,
                            icon: item.icon
                        };
                    })}
                />
            </div>
            <div className="w-60% ">
                <Flex justify="space-between" align="center" className="mb-5">
                    <h2>{currentIndex}</h2>
                    <Search placeholder="输入关键字" allowClear onSearch={onSearch} style={{ width: 200 }} />
                </Flex>

                <Outlet />
            </div>
            <div className="flex-1"></div>

        </Flex>
    )
}

export default ManageLayout
